<template>
	<div class="mui-numbox" data-numbox-min='1'>
		<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
		<input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>
		<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.min.js'
	export default{
		mounted() {
			mui(".mui-numbox").numbox();
		},
		methods:{
			countChanged(){
				var count = this.$refs.numbox.value;
				if(count<=0){
					count = 1;
				}
				//通过事件调用，向父组件传值
				this.$emit('getSelectedCount',count)
			}
		},
		props:["max"],
		watch:{
			"max":function(newVal,oldVal){
				/* 
				动态的设定 max 的值，因为，父组件中的库存数量的获取为异步的操作，
				本组件初始化的时候，获取到父组件传过来的参数为 undefined ，
				我们不知道什么时候可以正确的获取到这个值，但，总归有一个时刻是可以
				拿到这个值的，所以，我们需要 对 max 这个值进行监听，并且动态为 numbox 
				的最大值赋值
				 */
				mui(".mui-numbox").numbox().setOption('max',newVal);
			}
		}
	}
</script>

<style>
</style>
